<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/mui.min.css">
    <style>
    .p1{
        text-align: left;
    }
    span{
        display: inline-block;
        border:1px solid #ddd;
        /* margin-right: 3px; */
        margin-bottom: 5px;
        padding:0 5px;
        background:#f5f5f5;
    }
    </style>
</head>

<body>
    <input type="button" value="点击alert" id="btn1">
    <input type="button" value="点击confirm基本版" id="btn2">
    <input type="button" value="点击confirm不换行span" id="btn3">
    <input type="button" value="点击confirm换行span" id="btn4">
    <input type="button" value="点击confirm换行span使用正则过滤换行" id="btn5">
    <p id="tpl">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
    <script src="./js/mui.js"></script>
    <script>
    var oBtn1 = document.querySelector('#btn1');
    var oBtn2 = document.querySelector('#btn2');
    var oBtn3 = document.querySelector('#btn3');
    var oBtn4 = document.querySelector('#btn4');
    var oBtn5 = document.querySelector('#btn5');
    oBtn1.onclick = function(){
        mui.alert('欢迎使用Hello MUI', 'Hello MUI', function () {
            console.log('111');
        });
    }
     
    oBtn2.onclick = function(){
        mui.confirm('MUI是个好框架，确认？', 'Hello MUI', ['确定', '取消'], function (e) {
            if (e.index == 0) {
                console.log('你刚确认MUI是个好框架');
            } else {
                console.log('MUI没有得到你的认可，继续加油');
            }
        })
    }
     
    oBtn3.onclick = function(){
        mui.confirm('<p class="p1"><span>1</span><span>2</span><span>3</span><span>1</span><span>2</span><span>3</span><span>1</span><span>2</span><span>3</span><span>1</span><span>2</span><span>3</span><span>1</span><span>2</span><span>3</span><span>1</span><span>2</span><span>3</span></p>', 'Hello MUI', ['确定', '取消'], function (e) {
            if (e.index == 0) {
                console.log('你刚确认MUI是个好框架');
            } else {
                console.log('MUI没有得到你的认可，继续加油');
            }
        })
    }

    oBtn4.onclick = function () {
            var info = document.querySelector('#tpl').outerHTML;
            mui.confirm(info, 'Hello MUI', ['确定', '取消'], function (e) {
                if (e.index == 0) {
                    console.log('你刚确认MUI是个好框架');
                } else {
                    console.log('MUI没有得到你的认可，继续加油');
                }
            })
        }
    oBtn5.onclick = function () {
            var info = document.querySelector('#tpl').outerHTML;
            info = info.replace(/\n/g,'');
            mui.confirm(info, 'Hello MUI', ['确定', '取消'], function (e) {
                if (e.index == 0) {
                    console.log('你刚确认MUI是个好框架');
                } else {
                    console.log('MUI没有得到你的认可，继续加油');
                }
            })
        }
    
    </script>
</body>

</html>